<template>
  <div class="dashboard-editor-container">

    <template v-if="statisticsData">
      <CountKing :statistics-data="statisticsData" />
    </template>

    <div class="mt-22">
      <el-radio-group v-model="radioValue">
        <el-radio-button label="日统计" />
        <el-radio-button label="新用户充值分析" />
      </el-radio-group>
    </div>

    <div class="mt-22">
      <YxhyTableQuery :query-params.sync="queryParams" :query-columns="queryColumns" @search="init">
        <template slot="datetimeRange">
          <YxhyDatetimeRange :start-date.sync="queryTimeRange.start_date" :end-date.sync="queryTimeRange.end_date" />
        </template>
        <template #selectRemote>
          <YxhySelectRemote
            :value.sync="queryParams.product_id_search"
            :request-fn="queryListNonSortMp"
            :request-key="`product_name_search`"
            :response-id="`product_id`"
            :response-name="`product_name`"
            :placeholder="`请输入小程序名称`"
          />
        </template>
        <el-form-item slot="button">
          <el-button type="success" @click="">导出</el-button>
        </el-form-item>
      </YxhyTableQuery>

      <YxhyTableData
        :columns="movingColumns"
        :data="tableList"
        :loading="loading"
        :stripe="false"
      >
        <!-- 新增充值金额插槽 -->
<!--        <template #new_recharge_amount>
          <el-table-column align="center" width="auto">
            <template
              slot="header"
              slot-scope="{ column, $index }"
            >
              <p class="font-color-th">新增充值金额</p>
            </template>
            <template slot-scope="{ row }">
              <p class="font-color-td">￥{{ row.new_recharge_amount }}</p>
            </template>
          </el-table-column>
        </template>-->

      </YxhyTableData>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryPage.pageNum"
        :limit.sync="queryPage.limit"
        @pagination="init"
      />

    </div>

  </div>
</template>

<script>

import CountKing from './components/countKing/index.vue'
import { queryListNonSortMp } from '@/api/miniProgram/mp'
import { columnsStaticDay, columnsStaticUser } from './Ds'
import { queryHomeIndex, queryHomeList } from '@/api/index'
import { formatDate } from '@/utils'
import store from '@/store'
import { percentageNewIntl, twoDigitsNewIntl } from '@/utils/numberNewIntl'
import { queryStatisticsUser, queryStatisticsUserPageList } from '@/api/statistics/usered'

export default {
  name: 'UseredList',
  components: {
    CountKing
  },
  data() {
    return {
      radioValue: '日统计', // 1日统计 2新用户充值分析
      // 总条数
      total: 0,
      // 表格数据
      tableList: [],
      // 分页参数
      queryPage: {
        pageNum: 1,
        limit: 10
      },
      loading: false,

      // 查询参数
      queryParams: {
        product_id_search: undefined
      },
      // 查询表单
      queryColumns: [{
        label: '',
        type: 'datetimeRange',
        param: 'start_date'
      }, {
        label: '',
        placeholder: '请输入小程序名称',
        type: 'selectRemote',
        param: 'product_id_search'
      }],
      queryTimeRange: {
        start_date: undefined,
        end_date: undefined
      },
      queryListNonSortMp,

      statisticsData: undefined
    }
  },
  computed: {
    movingColumns() {
      if (this.radioValue === '日统计') return columnsStaticDay
      else return columnsStaticUser
    },
  },
  created() {
    this.queryStatistics()
    this.init()
  },
  methods: {
    async queryStatistics() {
      const data = await queryStatisticsUser()
      this.statisticsData = data
    },
    async init() {
      this.loading = true

      const res = await queryStatisticsUserPageList({
        ...this.queryPage,
        ...this.queryParams,
        ...this.queryTimeRange
      })
      res.data.forEach(e => {
        const { new_recharge_amount, cost, recharge_amount, day_1, day_2, day_3, day_4, day_5, day_7, day_15, day_30 } = e
        e.new_recharge_amount = `￥${new_recharge_amount}`
        e.recharge_amount = `￥${recharge_amount}`
        e.day_1 = `￥${day_1}`
        e.day_2 = `￥${day_2}`
        e.day_3 = `￥${day_3}`
        e.day_4 = `￥${day_4}`
        e.day_5 = `￥${day_5}`
        e.day_7 = `￥${day_7}`
        e.day_15 = `￥${day_15}`
        e.day_30 = `￥${day_30}`

        const number_type_recharge_amount = Number(recharge_amount)
        const number_type_cost = Number(cost)
        if (number_type_recharge_amount > 0 && number_type_cost > 0) {
          e.recoveryRatio = percentageNewIntl(number_type_recharge_amount / number_type_cost) + '%'
        } else {
          e.recoveryRatio = '0%'
        }
      })
      this.tableList = res.data
      this.total = res.total
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  position: relative;
}

</style>
